<template>
  <section class="banner"></section>

  <section class="about" id="about">
    <div class="container">
      <div class="row about-w3ls1">
        <div class="col-md-5">
          <div class="about-details">
            <h2>{{ $t("message.Home.AboutUs.title") }}</h2>
            <p>
              {{ $t("message.Home.AboutUs.CompanyIntroductionSection1") }}
            </p>
            <p>{{ $t("message.Home.AboutUs.CompanyIntroductionSection2") }}</p>
          </div>
        </div>
        <div class="col-md-7 about_left">
          <img
            class="about1 img-fluid"
            src="http://demo.mxyhn.xyz:8020/cssthemes4/cpts_984_ccq/images/about-img1.jpg"
            alt="w3layouts"
            title="w3layouts"
          />
        </div>
      </div>
    </div>
  </section>

  <section class="info">
    <div class="container">
      <div class="row">
        <div class="col-md-4 info-w3ls1">
          <h3>{{ $tm("message.Home.Service.title") }}</h3>
        </div>
        <div class="col-md-8 info-w3ls2">
          <div class="row g-4 py-5 row-cols-1 row-cols-md-3">
            <template
              v-for="(item, index) in $tm('message.Home.Service.details')"
              :key="index"
            >
              <div class="feature col">
                <div class="feature-icon">
                  <i :class="item.iconStyle" aria-hidden="true"></i>
                </div>
                <h4>{{ item.title }}</h4>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="divider" id="divider" style="height: 600px">
    <div class="container-fluid">
      <swiper
        :modules="swiper_options.modules"
        :slides-per-view="1"
        :space-between="swiper_options.spaceBetween"
        :loop="swiper_options.loop"
        :autoplay="swiper_options.autoplay"
        :speed="swiper_options.speed"
        :centeredSlides="swiper_options.centeredSlides"
        :slidesPerView="swiper_options.slidesPerView"
      >
        <swiper-slide>
          <div class="row">
            <div class="col-md-6" style="">
              <img
                src="http://demo.mxyhn.xyz:8020/cssthemes4/cpts_984_ccq/images/banner1.jpg"
                alt="w3layouts"
                title="w3layouts"
                class="img-fluid"
              />
            </div>
            <div class="col-md-6">
              <img
                src="http://demo.mxyhn.xyz:8020/cssthemes4/cpts_984_ccq/images/banner2.jpg"
                alt="w3layouts"
                title="w3layouts"
              />
            </div>
          </div>
        </swiper-slide>
        <swiper-slide>
          <div class="row">
            <div class="col-md-6">
              <img
                src="http://demo.mxyhn.xyz:8020/cssthemes4/cpts_984_ccq/images/banner3.jpg"
                alt="w3layouts"
                title="w3layouts"
              />
            </div>
            <div class="col-md-6">
              <img
                src="http://demo.mxyhn.xyz:8020/cssthemes4/cpts_984_ccq/images/banner4.jpg"
                alt="w3layouts"
                title="w3layouts"
              />
            </div>
          </div>
        </swiper-slide>
      </swiper>
    </div>
  </section>

  <section class="work" id="work">
    <div class="container">
      <h3 class="text-center">Our Works</h3>
      <p class="text-center">
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry.
      </p>
      <div class="row work-w3ls1">
        <div class="col-md-3 col-md-3 col-sm-6 work-agile1">
          <div class="grid">
            <figure class="effect-chico">
              <img
                class="img-responsive"
                src="http://demo.mxyhn.xyz:8020/cssthemes4/cpts_984_ccq/images/work-img1.jpg"
                alt="w3layouts"
                title="w3layouts"
              />
              <figcaption>
                <h4>Augue <span>Maximus</span></h4>
                <p>Lorem ipsum dolor sit amet.</p>
                <a
                  href="http://demo.mxyhn.xyz:8020/cssthemes4/cpts_984_ccq/images/work-img1-1.jpg"
                  class="thumbnail"
                  title="Augue Maximus"
                  >Read More</a
                >
              </figcaption>
            </figure>
          </div>
        </div>
        <div class="col-md-3 col-md-3 col-sm-6 work-agile1">
          <div class="grid">
            <figure class="effect-chico">
              <img
                class="img-responsive"
                src="http://demo.mxyhn.xyz:8020/cssthemes4/cpts_984_ccq/images/work-img2.jpg"
                alt="w3layouts"
                title="w3layouts"
              />
              <figcaption>
                <h4>Molestie <span>Metus</span></h4>
                <p>Lorem ipsum dolor sit amet.</p>
                <a
                  href="http://demo.mxyhn.xyz:8020/cssthemes4/cpts_984_ccq/images/work-img2-2.jpg"
                  class="thumbnail"
                  title="Molestie Metus"
                  >Read More</a
                >
              </figcaption>
            </figure>
          </div>
        </div>
        <div class="col-md-3 col-md-3 col-sm-6 work-agile1">
          <div class="grid">
            <figure class="effect-chico">
              <img
                class="img-responsive"
                src="http://demo.mxyhn.xyz:8020/cssthemes4/cpts_984_ccq/images/work-img3.jpg"
                alt="w3layouts"
                title="w3layouts"
              />
              <figcaption>
                <h4>Interdum <span>Dapibus</span></h4>
                <p>Lorem ipsum dolor sit amet.</p>
                <a
                  href="http://demo.mxyhn.xyz:8020/cssthemes4/cpts_984_ccq/images/work-img3-3.jpg"
                  class="thumbnail"
                  title="Interdum Dapibus"
                  >Read More</a
                >
              </figcaption>
            </figure>
          </div>
        </div>
        <div class="col-md-3 col-md-3 col-sm-6 work-agile1">
          <div class="grid">
            <figure class="effect-chico">
              <img
                class="img-responsive"
                src="http://demo.mxyhn.xyz:8020/cssthemes4/cpts_984_ccq/images/work-img4.jpg"
                alt="w3layouts"
                title="w3layouts"
              />
              <figcaption>
                <h4>Lorem <span>Ipsum</span></h4>
                <p>Lorem ipsum dolor sit amet.</p>
                <a
                  href="http://demo.mxyhn.xyz:8020/cssthemes4/cpts_984_ccq/images/work-img4-4.jpg"
                  class="thumbnail"
                  title="Lorem Ipsum"
                  >Read More</a
                >
              </figcaption>
            </figure>
          </div>
        </div>
      </div>
      <div class="row work-w3ls2">
        <div class="col-md-6 col-md-6 col-sm-12 work-grid">
          <div class="grid">
            <figure class="effect-chico">
              <img
                class="img-responsive"
                src="http://demo.mxyhn.xyz:8020/cssthemes4/cpts_984_ccq/images/work-img5.jpg"
                alt="w3layouts"
                title="w3layouts"
              />
              <figcaption>
                <h4>Adipiscing <span>Elit</span></h4>
                <p>Lorem ipsum dolor sit amet.</p>
                <a
                  href="http://demo.mxyhn.xyz:8020/cssthemes4/cpts_984_ccq/images/work-img5-5.jpg"
                  class="thumbnail"
                  title="Adipiscing Elit"
                  >Read More</a
                >
              </figcaption>
            </figure>
          </div>
        </div>
        <div class="col-md-3 col-md-3 col-sm-6 work-agile1">
          <div class="grid">
            <figure class="effect-chico">
              <img
                class="img-responsive"
                src="http://demo.mxyhn.xyz:8020/cssthemes4/cpts_984_ccq/images/work-img6.jpg"
                alt="w3layouts"
                title="w3layouts"
              />
              <figcaption>
                <h4>Nulla <span>Lacus</span></h4>
                <p>Lorem ipsum dolor sit amet.</p>
                <a
                  href="http://demo.mxyhn.xyz:8020/cssthemes4/cpts_984_ccq/images/work-img6-6.jpg"
                  class="thumbnail"
                  title="Nulla Lacus"
                  >Read More</a
                >
              </figcaption>
            </figure>
          </div>
        </div>
        <div class="col-md-3 col-md-3 col-sm-6 work-agile1">
          <div class="grid">
            <figure class="effect-chico">
              <img
                class="img-responsive"
                src="http://demo.mxyhn.xyz:8020/cssthemes4/cpts_984_ccq/images/work-img7.jpg"
                alt="w3layouts"
                title="w3layouts"
              />
              <figcaption>
                <h4>Tempus <span>Tincidunt</span></h4>
                <p>Lorem ipsum dolor sit amet.</p>
                <a
                  href="http://demo.mxyhn.xyz:8020/cssthemes4/cpts_984_ccq/images/work-img7-7.jpg"
                  class="thumbnail"
                  title="Tempus Tincidunt"
                  >Read More</a
                >
              </figcaption>
            </figure>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="service" id="service">
    <div class="container">
      <div class="row">
        <div class="col-md-4">
          <h3>{{ $tm("message.Home.Scope.title") }}</h3>
        </div>
        <div class="col-md-8">
          <div class="row">
            <template
              v-for="(item, index) in $tm('message.Home.Scope.details')"
              :key="index"
            >
              <div class="col-md-6">
                <div class="row g-0">
                  <div class="col-md-5 mb-md-0 p-md-4 icon-box">
                    <div class="hi-icon">
                      <i :class="item.iconStyle"></i>
                    </div>
                  </div>
                  <div class="col-md-7 p-4 ps-md-0">
                    <h4 class="mt-0">{{ item.title }}</h4>
                  </div>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="contact" id="contact">
    <div class="container">
      <h3>Contact Us</h3>
      <div class="contact-w3ls">
        <p class="addr1">123A Building, Road Street, Orlando District,US</p>
        <p class="addr2">
          +01 234 567 89, +01 234 567 89 |
          <a href="mailto:name@example.com">name@example.com</a>
        </p>
      </div>

      <div class="row">
        <div class="col-md-8" style="k">
          <div class="row">
            <div class="form-group col-md-4">
              <input
                type="text"
                class="form-control user-name"
                name="Name"
                placeholder="NAME"
                required=""
              />
            </div>
            <div class="form-group col-md-4">
              <input
                type="email"
                class="form-control mail"
                name="Email"
                placeholder="EMAIL"
                required=""
              />
            </div>
            <div class="form-group col-md-4">
              <input
                type="tel"
                class="form-control pno"
                name="Phone"
                placeholder="PHONE NUMBER"
                required=""
              />
            </div>
            <div class="clearfix"></div>
            <div class="form-group col-md-12">
              <textarea
                class="form-control"
                rows="6"
                name="Message"
                placeholder="YOUR MESSAGE"
                required=""
              ></textarea>
            </div>
          </div>
        </div>
        <div class="col-md-4" style="">
          <button type="submit" class="btn btn-primary">
            <i class="fa fa-check-circle-o" aria-hidden="true"></i> Submit
          </button>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
// Import Swiper Vue.js components
import { Navigation, Pagination, Controller, Autoplay } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
// https://blog.csdn.net/weixin_42063951/article/details/121354984
// https://blog.csdn.net/yunchong_zhao/article/details/120970625
// Import Swiper styles
import "swiper/css";
import "swiper/css/navigation";

import {
  reactive,
  ref,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
} from "vue";
export default {
  name: "",
  components: {
    Swiper,
    SwiperSlide,
  },
  props: {},
  setup() {
    const { proxy } = getCurrentInstance();
    const data = reactive({
      swiper_options: {
        modules: [Navigation, Autoplay],
        loop: true, //循环播放
        autoplay: { delay: 3000, disableOnInteraction: false },
        speed: 500,
        slidesPerView: "auto", //解决最后一张切换到第一张中间的空白
        centeredSlides: true, //设置slide居中
        spaceBetween: 0,
      },
    });
    const refData = toRefs(data);
    //
    onBeforeMount(() => {});
    onMounted(() => {});
    //
    const methods = {};
    //
    return {
      ...refData,
      //
      ...methods,
    };
  },
};
</script>

<style scoped>
section.banner,
section.banner .swiper {
  max-height: 795px;
}

section.banner {
  background: url("http://demo.mxyhn.xyz:8020/cssthemes4/cpts_984_ccq/images/banner1.jpg");
  /* background-color: #f38181; */
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -ms-background-size: cover;
  min-height: 795px;
  width: 100%;
  display: flex;
  align-items: center;
  text-align: center;
}

section.banner .banner-info hr {
  margin: 20px 280px;
  border-top: 2px solid rgba(255, 255, 255, 0.32);
  color: #fff;
}

.banner-info h3 {
  color: #fff;
  font-size: 2rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 15px;
}

/*  */
section.about {
  padding: 100px 0 320px;
  position: relative;
  background-color: #f7f7f7;
}
section.about h2 {
  font-size: 2.5rem;
  font-weight: 600;
  padding-bottom: 20px;
  text-transform: uppercase;
  color: #2e6f97;
}
section.about p {
  font-size: 16px;
  font-weight: normal;
  line-height: 35px;
  padding-bottom: 15px;
}
section.about .about-details {
  padding: 1em;
}
section.about img.img-responsive {
}
.about-w3ls2 {
  position: absolute;
  width: inherit;
  bottom: 7em;
}
img.about2 {
}
img.about3 {
  padding-top: 150px;
}
.col-md-7.col-md-7.about_left {
  padding-left: 0;
  margin: 0;
}
.col-md-6.col-md-6.about_right {
}
.col-md-3.col-md-3.about_left_grid {
}

@media (max-width: 991px) .about-w3ls2 {
  position: static;
}

@media (max-width: 1080px) .about-w3ls2 {
  bottom: 90px;
}
.about-w3ls2 {
  position: absolute;
  width: inherit;
  bottom: 7em;
}

/*-- info section --*/
section.info {
  padding: 100px 0;
}
section.info h3 {
  font-size: 2.5rem;
  font-weight: 700;
  padding: 55px 55px 0;
  color: #2e6f97;
  line-height: 65px;
  text-transform: uppercase;
}
section.info i {
  font-size: 2rem;
  vertical-align: middle;
  text-align: center;
  color: #f38181;
}
/* section.info i:hover {
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} */
section.info h4 {
  font-size: 20px;
  font-weight: 700;
  padding: 15px 0 10px;
  color: #000;
}
section.info p {
  font-size: 15px;
  padding: 0px 0 45px;
  line-height: 30px;
  color: #000;
}
/*-- /info section --*/

/*-- work section --*/
section.work {
  padding: 100px 0;
}
section.work h3.text-center {
  font-size: 40px;
  font-weight: 600;
  color: #2c7095;
  padding-bottom: 20px;
  text-transform: uppercase;
}
section.work p.text-center {
  font-size: 16px;
  padding-bottom: 50px;
}
section.work .row.work-w3ls2 {
  margin-top: 30px;
}
section.work .content {
  margin: 0 auto;
}
section.work .content > h4 {
  clear: both;
  margin: 0;
  padding: 4em 1% 0;
  color: #484b54;
  font-weight: 800;
  font-size: 1.5em;
}
section.work .content > h4:first-child {
  padding-top: 0em;
}
section.work .grid {
  position: relative;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  list-style: none;
  text-align: center;
}
section.work .grid figure {
  position: relative;
  float: left;
  overflow: hidden;
  margin: 0;
  width: 100%;
  background: #3085a3;
  text-align: center;
  cursor: pointer;
}
section.work .grid figure img {
  position: relative;
  display: block;
  height: auto;
  width: 100%;
  opacity: 0.8;
}
section.work .grid figure figcaption {
  padding: 0;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.25em;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/*section.work .grid figure figcaption::before,
section.work .grid figure figcaption::after {
	pointer-events: none;
}*/
section.work .grid figure figcaption,
section.work .grid figure figcaption > a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
section.work .grid figure figcaption > a {
  z-index: 1000;
  text-indent: 200%;
  white-space: nowrap;
  font-size: 0;
  opacity: 0;
}
section.work .grid figure h4 {
  word-spacing: 0;
  font-weight: 300;
}
section.work .grid figure h4 span {
  font-weight: 800;
}
section.work .grid figure h4,
section.work .grid figure p {
  margin: 0;
}
section.work .grid figure p {
  letter-spacing: 1px;
  font-size: 68.5%;
}
section.work figure.effect-chico img {
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: scale(1.12);
  transform: scale(1.12);
}
section.work figure.effect-chico:hover img {
  opacity: 0.5;
  -webkit-transform: scale(1);
  transform: scale(1);
}
section.work figure.effect-chico figcaption {
  padding: 3em;
}
section.work figure.effect-chico figcaption::before {
  position: absolute;
  top: 30px;
  right: 30px;
  bottom: 30px;
  left: 30px;
  border: 1px solid #fff;
  content: "";
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
section.work figure.effect-chico figcaption::before,
section.work figure.effect-chico p {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
}
section.work figure.effect-chico h4 {
  padding: 44% 0 10px 0;
  font-size: 16px;
}
section.work .work-grid figure.effect-chico h4 {
  padding: 13% 0 20px 0;
}
section.work figure.effect-chico p {
  margin: 0 auto;
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
  line-height: 2em;
  color: #fff;
}
section.work figure.effect-chico:hover figcaption::before,
section.work figure.effect-chico:hover p {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

@media screen and (max-width: 50em) {
  section.work .content {
    padding: 0 10px;
    text-align: center;
  }
  section.work .grid figure {
    display: inline-block;
    float: none;
    margin: 10px auto;
    width: 100%;
  }
}
/*-- /work section --*/

/*-- service section --*/
section.service {
  padding: 100px 0;
  background-color: #136eb4;
}
section.service h3 {
  color: #fff;
  font-size: 2.5rem;
  font-weight: 600;
  padding: 30px 0;
  line-height: 80px;
  text-transform: uppercase;
}
section.service a {
  text-decoration: none;
}
section.service h4 {
  font-size: 21px;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  padding-bottom: 10px;
}
section.service p {
  font-size: 16px;
  color: #fff;
  width: 135%;
  padding-bottom: 40px;
  line-height: 35px;
}

section.service .icon-box {
  text-align: center;
  margin: 0 auto;
  padding: 0;
}

section.service .icon-box .hi-icon {
  display: inline-block;
  font-size: 0px;
  cursor: pointer;
  margin: 0px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  text-align: center;
  position: relative;
  z-index: 1;
  color: #fff;
  border: #fff 2px solid;
}

section.service .icon-box .hi-icon i {
  font-size: 1.5rem;
  color: white;
  line-height: 90px;
}

/*-- /service section --*/
section.divider swiper {
  max-height: 765px;
}

section.divider img {
  display: block;
  height: auto;
  width: 100%;
}

.divide-info1,
.divide-info2 {
  position: absolute;
  z-index: 99;
  width: 100%;
  text-align: justify;
  top: 20%;
  padding: 0 50px;
  margin-left: 0px;
}

.divide-info1 h3,
.divide-info2 h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
  padding-bottom: 15px;
  text-transform: uppercase;
}

.divide-info1 p.divide-p1,
.divide-info2 p.divide-p1 {
  width: 100%;
  font-size: 1rem;
  font-weight: bold;
  padding-bottom: 60px;
  line-height: 1.5rem;
  color: #fff;
  text-transform: uppercase;
}
.divide-info1 p.divide-p2,
.divide-info2 p.divide-p2 {
  font-size: 1rem;
  color: #fff;
  line-height: 1.5rem;
}
/*  */
section.contact {
  padding: 100px 0;
}

section.contact h3 {
  font-size: 55px;
  font-weight: 600;
  padding-bottom: 30px;
  color: #38789e;
  text-transform: uppercase;
  width: 20%;
}

section.contact p.addr1 {
  font-size: 1rem;
  font-weight: normal;
  padding-bottom: 10px;
}

section.contact p.addr2 {
  font-size: 15px;
  font-weight: normal;
  padding-bottom: 10px;
}

section.contact p.addr2 a {
  text-decoration: none;
  color: #999;
}
</style>
